<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Zwe Box :: Examples</title>

    <link type="text/css" rel="stylesheet" href="../Source/themes/default/zwebox.css" />
    <!--[if IE 6]>
    <link rel="stylesheet" type="text/css" href="../Source/themes/default/zwebox.ie6.css" />
    <![endif]-->

    <script type="text/javascript" src="mootools-core.js"></script>
    <script type="text/javascript" src="mootools-more.js"></script>
    <script type="text/javascript" src="Overlay.js"></script>
    <script type="text/javascript" src="../Source/zwebox.js"></script>
    <script type="text/javascript">
        window.addEvent('domready', function(){
            new ZweBox();

            $$('a.zwebox-customButton').store('ZweBox.Options', {
                buttons: [{
                    'class': 'zwebox-button-openurl',
                    html: '<span>Open in new window</span>',
                    callback: function(element){
                        window.location.href = element.get('href');
                    }
                }]
            });

            document.id('advanced_javascript_image').zwebox({
                width: 610,
                height: 458,
                autoResize: false,
                name: 'zwebox'
            }, 'http://3.s3.envato.com/files/1423518/assets/4.jpg');

            document.id('advanced_javascript_gallery').zweboxGallery({}, ['http://3.s3.envato.com/files/1423518/assets/4.jpg', 'http://3.s3.envato.com/files/1423518/assets/3.jpg', 'http://3.s3.envato.com/files/1423518/assets/6.jpg']);

            document.id('advanced_javascript_ajaxGallery').zweboxGallery({
                width: 500,
                height: 200
            }, ['ajax.html', 'ajax2.html', 'ajax3.html']);

            document.id('advanced_events_button').zwebox({
                hideOnClick: false,

                onOpen: function(){
                    console.log('opening function fired!!!')
                },
                onClose: function(){
                    console.log('closing function fired!!!');
                }
            }, 'http://3.s3.envato.com/files/1423518/assets/3.jpg');
        });
    </script>

    <!-- Used in the custom buttons example -->
    <style type="text/css">

    .zwebox-buttons .zwebox-button-openurl
    {
        background: url(zwebox-new-window.png) no-repeat left top;
        width: 30px;
        height: 39px;
        float: left;
        display: inline;
        padding: 0;
    }

    .zwebox-buttons .zwebox-button-openurl:hover
    {
        background: url(zwebox-new-window.png) no-repeat right top;
    }

    </style>
</head>
<body>

<h1><a name="top">ZweBox - Mootools and Lightbox together</a></h1>
<h2>Examples</h2>
<h3>by Zweer</h3>

<h2>Table of <strong>Contents</strong></h2>

<h3><a href="#images">Images</a></h3>
<ol>
    <li><a href="#images_single">Single Image</a></li>
    <li><a href="#images_gallery">Image Gallery</a></li>
    <li><a href="#images_big">Big Images</a></li>
    <li>
        <a href="#images_advanced">Advanced Image Examples</a>
        <ol>
            <li><a href="#images_advanced_force">Force Size</a></li>
            <li><a href="#images_advanced_relative">Relative Size</a></li>
            <li><a href="#images_advanced_disable">Disable Autoresize</a></li>
            <li><a href="#images_advanced_hideOnClick">Disable Hide on Click</a></li>
        </ol>
    </li>
</ol>
<h3><a href="#html">HTML</a></h3>
<ol>
    <li><a href="#html_inline">Inline Content</a></li>
    <li><a href="#html_ajax">Ajax</a></li>
    <li><a href="#html_flash">Flash / SWF</a></li>
    <li><a href="#html_iframe">IFrame</a></li>
    <li>
        <a href="#html_advanced">Advanced HTML Examples</a>
        <ol>
            <li><a href="#html_advanced_flashFixed">Open Flash in Fixed Size</a></li>
            <li><a href="#html_advanced_ajaxWithCloseButton">Ajax with button to close ZweBox</a></li>
        </ol>
    </li>
</ol>
<h3><a href="#videos">Videos</a></h3>
<ol>
    <li><a href="#videos_simple">Simple Usage</a></li>
    <li>
        <a href="#videos_advanced">Advanced Examples</a>
        <ol>
            <li><a href="#videos_advanced_fixed">Open video in Fixed Size and disable Hide on Click</a></li>
        </ol>
    </li>
</ol>
<h3><a href="#maps">Maps</a></h3>
<ol>
    <li><a href="#maps_simple">Simple Usage</a></li>
</ol>
<h3><a href="#advanced">Advanced Examples</a></h3>
<ol>
    <li><a href="#advanced_buttons">Custom Buttons</a></li>
    <li><a href="#advanced_shake">Shake Effect</a></li>
    <li><a href="#advanced_login">Login Box</a></li>
    <li><a href="#advanced_javascript">Open ZweBox via Javascript</a></li>
    <li><a href="#advanced_events">Events</a></li>
</ol>

<h3><a name="images">Images</a></h3>
<h4><a name="images_single">Single Image</a></h4>
<div>
    <a href="http://3.s3.envato.com/files/1423518/assets/1.jpg" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m1.jpg" alt="Example 1" /></a>
    <a href="http://3.s3.envato.com/files/1423518/assets/2.jpg" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m2.jpg" alt="Example 2" /></a>
    <a href="http://3.s3.envato.com/files/1423518/assets/7.jpg" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m7.jpg" alt="Example 7" /></a>
</div>
<h4><a name="images_gallery">Image Gallery</a></h4>
<div>
    <a href="http://3.s3.envato.com/files/1423518/assets/5.jpg" class="zwebox" rel="gallery1"><img src="http://3.s3.envato.com/files/1423518/assets/m5.jpg" alt="Example 5" /></a>
    <a href="http://3.s3.envato.com/files/1423518/assets/6.jpg" class="zwebox" rel="gallery1"><img src="http://3.s3.envato.com/files/1423518/assets/m6.jpg" alt="Example 6" /></a>
    <a href="http://3.s3.envato.com/files/1423518/assets/9.jpg" class="zwebox" rel="gallery1" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ipsum nec sem scelerisque quis faucibus quam scelerisque. Sed quis arcu purus. Donec at lacus nec leo laoreet viverra at ac risus. Vivamus ipsum orci, interdum ut commodo sodales, ullamcorper a felis. "><img src="http://3.s3.envato.com/files/1423518/assets/m9.jpg" alt="Example 9" /></a>
</div>
<h4><a name="images_big">Big Images</a></h4>
<div>
    <a href="http://3.s3.envato.com/files/1423518/assets/4.jpg" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m4.jpg" alt="Example 4" /></a>
    <a href="http://3.s3.envato.com/files/1423518/assets/8.jpg" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m8.jpg" alt="Example 8" /></a>
</div>
<h4><a name="images_advanced">Advanced Example</a></h4>
<h5><a name="images_advanced_force">Force Size</a></h5>
<div>
    <a href="http://3.s3.envato.com/files/1423518/assets/3.jpg?zwebox[width]=400&zwebox[height]=200" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m3.jpg" alt="Example 3" /></a>
    <a href="http://3.s3.envato.com/files/1423518/assets/6.jpg?zwebox[width]=300&zwebox[height]=200" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m6.jpg" alt="Example 6" /></a>
</div>
<h5><a name="images_advanced_relative">Relative Size</a></h5>
<div>
    <a href="http://3.s3.envato.com/files/1423518/assets/5.jpg?zwebox[width]=50p&zwebox[height]=50p" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m5.jpg" alt="Example 5" /></a>
    <a href="http://3.s3.envato.com/files/1423518/assets/2.jpg?zwebox[width]=100p&zwebox[height]=100p" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m2.jpg" alt="Example 2" /></a>
</div>
<h5><a name="images_advanced_disable">Disable Autoresize</a></h5>
<div>
    <a href="http://3.s3.envato.com/files/1423518/assets/9.jpg?zwebox[autoResize]=false" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m9.jpg" alt="Example 9" /></a>
    <a href="http://3.s3.envato.com/files/1423518/assets/4.jpg?zwebox[autoResize]=false" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m4.jpg" alt="Example 4" /></a>
</div>
<h5><a name="images_advanced_hideOnClick">Disable Hide on Click</a></h5>
<div>
    <a href="http://3.s3.envato.com/files/1423518/assets/5.jpg?zwebox[hideOnClick]=false" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m5.jpg" alt="Example 5" /></a>
</div>

<h3><a name="html">HTML</a></h3>
<h4><a name="html_inline">Inline Content</a></h4>
<div>
    <div id="inline_content" style="display: none; width: 500px;">Nullam varius congue fringilla. Curabitur auctor dapibus molestie. Cras malesuada vestibulum lectus, vel ullamcorper nibh tempus lobortis. Donec ipsum magna, malesuada et fringilla eget, placerat ut arcu. Donec aliquet, mauris ut pellentesque tincidunt, massa dolor tempor urna, ac interdum massa nisl id tellus. Maecenas eu nunc varius lorem porttitor faucibus. Suspendisse potenti. Donec ullamcorper vehicula pretium. In aliquam adipiscing mi, rhoncus eleifend felis auctor eu. Aenean et mi vitae ante ultricies pulvinar a vel neque.</div>
    <a href="#inline_content" class="zwebox">Open Inline Content</a>
    <a href="?zwebox[width]=200&zwebox[height]100#inline_content" class="zwebox">Open Inline Content with Fixed Size</a>
</div>
<h4><a name="html_ajax">Ajax</a></h4>
<div>
    <a href="ajax.html?zwebox[width]=350&zwebox[height]=170" class="zwebox">Open Ajax with Fixed Size (350px x 170px)</a>
    <a href="ajax.html?zwebox[width]=75p&zwebox[height]=50p" class="zwebox">Open Ajax with Relative Size (75% x 50%)</a>
    <a href="ajax.html?zwebox[width]=610&zwebox[height]=360&zwebox[hideOnClick]=false" class="zwebox">Open Ajax with disabled Hide on Click</a>
</div>
<h4><a name="html_flash">Flash / SWF</a></h4>
<div>
    <a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m11.jpg" alt="Flash"></a>
</div>
<h4><a name="html_iframe">IFrame</a></h4>
<div>
    <a href="http://www.google.com/webhp?hl=en&tab=nw&zwebox[iframe]=true&zwebox[width]=770&zwebox[height]=460" class="zwebox">Open Google</a>
    <a href="iframe.html?zwebox[iframe]=true&zwebox[width]=350&zwebox[height]=170" class="zwebox">Open localhost IFrame</a>
</div>
<h4><a name="html_advanced">Advanced HTML Examples</a></h4>
<h5><a name="html_advanced_flashFixed">Open Flash in Fixed Size</a></h5>
<div>
    <a href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf?zwebox[width]=700&zwebox[height]=400" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m11.jpg" alt="Flash"></a>
</div>
<h5><a name="html_advanced_ajaxWithCloseButton">Ajax with button to close ZweBox</a></h5>
<div>
    <a href="ajax2.html?zwebox[width]=450&zwebox[height]=300&zwebox[modal]=true" class="zwebox">Software license agreement</a>
</div>

<h3><a name="videos">Videos</a></h3>
<h4><a name="videos_simple">Simple Usage</a></h4>
<div>
    <a href="http://www.youtube.com/watch?v=6T-PXiwpN-k" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m12.jpg" alt="YouTube"/></a>
    <a href="http://vimeo.com/13240711" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m13.jpg" alt="Vimeo"/></a>
    <a href="http://www.metacafe.com/watch/yt-nn096G5jek0/coldplay_speed_of_sound_acoustic/" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m14.jpg" alt="MetaCafe"/></a>
    <a href="http://www.dailymotion.com/video/x53dvz_fragma-toca-s-miracle-2008_music" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m15.jpg" alt="DailyMotion"/></a>
    <a href="http://video.google.com/videoplay?docid=-8618166999532839788" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m16.jpg" alt="Google Video"/></a>
    <a href="http://www.gametrailers.com/video/cod-xp-call-of/720348" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m22.jpg" alt="Game Trailers"/></a>
    <a href="http://www.twitvid.com/8H9D2" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m24.jpg" alt="Twit Vid"/></a>
    <a href="http://www.collegehumor.com/video:1927354" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m23.jpg" alt="College Humor"/></a>
</div>
<h4><a name="videos_advanced">Advanced Examples</a></h4>
<h5><a name="videos_advanced_fixed">Open video in Fixed Size and disable Hide on Click</a></h5>
<div>
    <a href="http://video.google.com/videoplay?docid=-8618166999532839788&zwebox[width]=610&zwebox[height]=360" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m16.jpg" alt="Google Video"/></a>
    <a href="http://www.youtube.com/watch?v=6T-PXiwpN-k&zwebox[width]=610&zwebox[height]=360&zwebox[hideOnClick]=false" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m12.jpg" alt="YouTube"/></a>
</div>

<h3><a name="maps">Maps</a></h3>
<h4><a name="maps_simple">Simple Usage</a></h4>
<div>
    <a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=+paris+eiffel&ie=UTF8&hq=eiffel&hnear=Paris,+Ile-de-France,+France&ll=48.855708,2.300434&spn=0.013243,0.042272&z=15&zwebox[width]=610&zwebox[height]=360" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m19.jpg" alt="Google Maps"/></a>
    <a href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=+paris+eiffel&ie=UTF8&hq=eiffel&hnear=Paris,+Ile-de-France,+France&ll=48.856075,2.312021&spn=0.02626,0.084543&z=14&layer=c&cbll=48.85738,2.294552&panoid=CpyaiHG57nbMr8YogDfa0Q&cbp=12,34.51,,0,-2.58&zwebox[width]=610&zwebox[height]=360" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m20.jpg" alt="Google Street View"/></a>
    <a href="http://www.bing.com/maps/?v=2&cp=41.89774457054518~12.471384108066559&lvl=15&sty=r&where1=Rome%2C%20Laz.%2C%20Italy&zwebox[width]=610&zwebox[height]=360" class="zwebox"><img src="http://3.s3.envato.com/files/1423518/assets/m21.jpg" alt="Bind Maps"/></a>

</div>

<h3><a name="advanced">Advanced Examples</a></h3>
<h4><a name="advanced_buttons">Custom Buttons</a></h4>
<div>
    <a href="http://3.s3.envato.com/files/1423518/assets/1.jpg" class="zwebox zwebox-customButton"><img src="http://3.s3.envato.com/files/1423518/assets/m1.jpg" alt="Example 1" /></a>
    <a href="http://3.s3.envato.com/files/1423518/assets/7.jpg" class="zwebox zwebox-customButton"><img src="http://3.s3.envato.com/files/1423518/assets/m7.jpg" alt="Example 7" /></a>
    <a href="http://3.s3.envato.com/files/1423518/assets/9.jpg" class="zwebox zwebox-customButton" rel="gallery2"><img src="http://3.s3.envato.com/files/1423518/assets/m9.jpg" alt="Example 9" /></a>
    <a href="http://3.s3.envato.com/files/1423518/assets/6.jpg" class="zwebox zwebox-customButton" rel="gallery2"><img src="http://3.s3.envato.com/files/1423518/assets/m6.jpg" alt="Example 6" /></a>
</div>
<h4><a name="advanced_shake">Shake Effect</a></h4>
<div>
    <a href="iframe.html?zwebox[iframe]=true&zwebox[width]=350&zwebox[height]=170" class="zwebox">Shake Effect</a>
</div>
<h4><a name="advanced_login">Login Box</a></h4>
<div>
    <a href="ajax3.html?zwebox[width]=396&zwebox[height]=120&zwebox[hideOnClick]=true" class="zwebox">Login Box</a>
</div>
<h4><a name="advanced_javascript">Open ZweBox via Javascript</a></h4>
<div>
    <button id="advanced_javascript_image">Open single image</button>
    <button id="advanced_javascript_gallery">Open image gallery</button>
    <button id="advanced_javascript_ajaxGallery">Open ajax gallery</button>
</div>
<h4><a name="advanced_events">Events</a></h4>
<div>
    <button id="advanced_events_button">Click me</button>
</div>

</body>
</html>